<template>
  <div class="importOrder">
    <el-dialog class="dialog" title="批量导入订单" :visible.sync="dialogVisible">
      <el-form ref="form"  label-width="120px" >
        <el-form-item label="模板上传">
          <el-upload
            class="upload-demo"
            :action="`${baseUrl}/${action}?logicId=${this.$route.params.id}&__token=${token}`"
            :headers="headers"
            :data="data"
            :on-success="handleSuccess"
            :before-upload="handleBeforeUpload"
            :on-error="handleError"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <!--<div slot="tip" class="el-upload__tip">请严格按照模板文件上传！</div>-->
          </el-upload>
        </el-form-item>
        <el-form-item label="下载导入模板">
          <a class="export" @click="downTemplateFn">导入模板.xls</a>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script type="text/babel">
  import {importOrder, downTemplate} from '@/service/getData'
  import env from '@/config/env'
  export default {
    data () {
      return {
        msg: 'import customer order',
        loading: false,
        dialogVisible: false,

        action: importOrder,
        headers: {

        },
        data: {
          pageId: this.$route.params.id
        },
        fileList: []
      }
    },
    props: ['lastImport'],
    computed: {
      baseUrl () {
        return env.baseUrl2
      },
      token () {
        return localStorage.getItem('UBToken')
      }
    },
    methods: {
      init () {
        this.dialogVisible = true
      },
      downTemplateFn () {
        downTemplate().then((res) => {
          if (res.data.code === 1) {
            window.location.href = res.data.data.filePath
          }
        })
      },
      handleBeforeUpload (file) {

      },
      handleSuccess (response, file, fileList) {
        if (response.code && response.code === 1) {
          this.$message(response.msgZ || response.msgE || '成功')
          this.lastImport.importTime = response.data.importTime
          this.lastImport.importCount = response.data.successCount
          this.lastImport.repeatCount = response.data.repeatCount
          this.lastImport.errorCount = response.data.errorCount
          this.$emit('axiosSuccess')
        } else {
          this.$message({
            type: 'warning',
            message: response.msgZ || response.msgE
          })
        }
      },
      handleError (err, file, fileList) {
        err.message && this.$message.error(err.message)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">
.importOrder{
  a.export{
    margin-left: 0;
    cursor: pointer;
  }
}
</style>
